<template>
  <div class="login-back-box">
    <div class="blue">后台登录</div>
    <div class="login-box">
        <div class="user">
          <span>账号</span>
          <input type="text" placeholder="请输入账号" v-model="user"/>
        </div>
        <div class="password">
          <span>密码</span>
          <input id="password" type="password" placeholder="请输入密码" v-model="password" />
        </div>
        <div class="code">
          <span>验证码</span>
          <input id="codenumber" type="text" v-model="code"/>
          <span class="code-img"><img id="codeimg" v-bind:src="codedata" v-on:click="codepush"></span>
        </div>
        <input class="submit" type="button" v-on:click="submit" value="登录"/>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
  data () {
    return {
      user: '',
      password: '',
      code: '',
      codedata: '/gp/Account/VerifyCode'
    }
  },
  methods: {
    codepush: function () {
      var n = Math.random()
      this.codedata = '/gp/Account/VerifyCode?T=' + n
    },
    submit: function () {
      var that = this
      that.$pub.open()
      axios.post('/gp/Account/Login', qs.stringify({
        Code: that.code,
        Password: that.password,
        Username: that.user
      })
      )
        .then((res) => {
          that.$pub.close()
          if (res.data.code === 0) {
            localStorage.setItem('state', res.data.data.isinit)
            localStorage.setItem('type', res.data.data.type)
            that.$router.push({ name: 'Welcome' })
          } else {
            that.$pub.failcode(that, res.data.code, res.data.data)
          }
        })
        .catch(function () {
          that.$pub.catchbox(that)
        })
    }
  }
}
</script>

<style>
.login-back-box{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #3d4e66;
}
.blue{
  height: 50px;
  width: 452px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -210px;
  margin-left: -225px;
  z-index: 999;
  font-size: 38px;
  text-align: center;
  color:#fff;
}
.login-box{
  width: 452px;
  height: 292px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -146px;
  margin-left: -226px;
  background-color: #495e7a;
  z-index: 5;
  -webkit-box-shadow: #3a4960 100px 100px 100px;
     -moz-box-shadow: #3a4960 100px 100px 100px;
       -o-box-shadow: #3a4960 100px 100px 100px;
          box-shadow: #3a4960 100px 100px 100px;
}
.login-box span{
  display: block;
  font-size: 14px;
  color: #e9eef5;
  height: 34px;
  line-height: 34px;
  width: 60px;
  text-align: left;
  float: left;
  margin-left: 15px;
}
.user,.password,.code{
  margin-left: 60px;
  margin-top: 25px;
  overflow: hidden;
}
.user{
  margin-top: 40px;
}
/*用户名输入*/
.user input{
  width: 262px;
  height: 32px;
  border: #3d4e66 solid 1px;
  padding-left: 5px;
  font-size: 12px;
  line-height: 32px;
  float: left;
}
/*登录密码输入*/
.password input{
  width: 262px;
  height: 32px;
  border: #3d4e66 solid 1px;
  padding-left: 5px;
  font-size: 12px;
  line-height: 32px;
  float: left;
}
/*验证码输入*/
.code input{
  width: 95px;
  height: 32px;
  border: #3d4e66 solid 1px;
  padding-left: 5px;
  font-size: 12px;
  line-height: 32px;
  float: left;
}
/*验证码图片框*/
#login .code-img{
  width: 75px;
  height: 30px;
  margin-left: 20px;
  margin-bottom: -10px;
}
/*提交按钮*/
.submit{
  width: 262px;
  height: 33px;
  margin-left:124px;
  margin-top: 20px;
  background: #19b394;
  border: #50949f solid 1px;
  cursor: pointer;
  font-size: 14px;
  padding-left:22px;
  letter-spacing:22px;
  color: #fff;
  line-height: 33px;
}
</style>
